<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/pages/templates/template.xhtml">
	<ui:define name="metadata">
	</ui:define>
	<ui:define name="content">
		<h:form id="formAlocacao">
			<div>
				<div class="div-titulo-tela">
					<p:outputLabel styleClass="titulo-tela">Editar/Conferir Alocação</p:outputLabel>
					<br /> <br />
					<p:separator></p:separator>
					<div class="div-titulo-botoes">
						<p:commandButton value="Salvar" update="formAlocacao"
							action="#{AlocacaoConferirBean.doAlocar}" />
					    <p:commandButton value="Finalizar" update="formAlocacao"
							action="#{AlocacaoConferirBean.doFinalizar}" />
					</div>
				</div>
				<div>
					<div class="div-corpo-tela">
						<div class="div-mensagem">
							<p:messages id="messages" autoUpdate="true" closable="true" />
						</div>

						<!-- LISTA DE ALOCAÇÕES REALIZADAS -->
						<p:outputPanel id="dropArea">
							<p:dataTable id="dtAlocacaoGrupo"
								style="width:49%; position:relative; float:left;" var="grupo"
								emptyMessage="" value="#{AlocacaoConferirBean.grupos}"
								rowKey="#{grupo.id}"
								selection="#{AlocacaoConferirBean.grupoAlocadoSelecionado}"
								selectionMode="single">
								
								<p:ajax event="rowSelect"
									listener="#{AlocacaoConferirBean.onGrupoAlocadoRowSelect}"
									update=":formAlocacao:infoGrupo :formAlocacao:dtGrupos" />
									
								<p:ajax event="rowUnselect"
									listener="#{AlocacaoConferirBean.onGrupoAlocadoRowUnselect}"
									update=":formAlocacao:infoGrupo" />
									
								<p:column headerText="Alunos">
									<h:outputText style="height:30px;" value="#{grupo.alunos}" />
								</p:column>
							</p:dataTable>
							<p:dataTable id="dtAlocacaoProfessor"
								style="width:49%; position:relative; float:left;" var="grupo"
								emptyMessage="" value="#{AlocacaoConferirBean.grupos}" 
								rowKey="#{grupo.id}"
								selection="#{AlocacaoConferirBean.professorAlocadoSelecionado}"
								selectionMode="single">
								
								<p:ajax event="rowSelect"
									listener="#{AlocacaoConferirBean.onProfessorAlocadoRowSelect}"
									update=":formAlocacao:infoProfessor :formAlocacao:dtProfessores" />
									
								<p:ajax event="rowUnselect"
									listener="#{AlocacaoConferirBean.onProfessorAlocadoRowUnselect}"
									update=":formAlocacao:infoProfessor" />
								
								<p:column headerText="Professor">
									<h:outputText value="#{grupo.nomeProfessor}" />
								</p:column>
								<p:column style="width:4%">
									<p:commandButton id="btnRemover" icon="ui-icon-close"
										style="height:17px;" title="Desfazer alocacao"
										onclick="confirmation.show()">
										<f:setPropertyActionListener
											target="#{AlocacaoConferirBean.grupoDesfazer}"
											value="#{grupo}"></f:setPropertyActionListener>
									</p:commandButton>
								</p:column>

							</p:dataTable>
							<p:droppable id="dropGrupo" for="dtAlocacaoGrupo"
								tolerance="touch" activeStyleClass="ui-state-highlight"
								datasource="dtGrupos" onDrop="handleDrop">
								<p:ajax listener="#{AlocacaoConferirBean.onGrupoDrop}"
									update="dropArea dtGrupos dtProfessores" />
							</p:droppable>

							<p:droppable id="dropProfessor" for="dtAlocacaoProfessor"
								tolerance="touch" activeStyleClass="ui-state-highlight"
								datasource="dtProfessores" onDrop="handleDrop">
								<p:ajax listener="#{AlocacaoConferirBean.onProfessoroDrop}"
									update="dropArea dtGrupos dtProfessores" />
							</p:droppable>

							<p:commandButton value="Associar"
								update="dropArea dtGrupos dtProfessores"
								action="#{AlocacaoConferirBean.associar}" />
						</p:outputPanel>

						<br />

						<p:outputPanel>
							<!-- LISTA DE GRUPOS DE TRABALHO DISPONIVEIS -->

							<p:dataTable id="dtGrupos" var="grupo" emptyMessage=""
								style="width:40%; float:left; position:relative;"
								value="#{AlocacaoConferirBean.gruposNaoAlocados}"
								rowKey="#{grupo.id}"
								selection="#{AlocacaoConferirBean.grupoSelecionado}"
								selectionMode="single">
								
								<p:ajax event="rowSelect"
									listener="#{AlocacaoConferirBean.onGrupoRowSelect}"
									update=":formAlocacao:infoGrupo :formAlocacao:dtAlocacaoGrupo" />
									
								<p:ajax event="rowUnselect"
									listener="#{AlocacaoConferirBean.onGrupoRowUnselect}"
									update=":formAlocacao:infoGrupo" />
								<p:column style="width:20px">
									<h:outputText id="dragGrupo"
										styleClass="ui-icon ui-icon-arrow-4" />
									<p:draggable for="dragGrupo" revert="true" />
								</p:column>
								<p:column headerText="Alunos">
									<h:outputText value="#{grupo.alunos}" />
								</p:column>
							</p:dataTable>

							<!-- LISTA DE PROFESSORES DISPONIVEIS -->

							<p:dataTable id="dtProfessores" var="prof" emptyMessage=""
								style="width:40%; float:right; position:relative;"
								value="#{AlocacaoConferirBean.professores}"
								rowKey="#{prof.matricula}"
								selection="#{AlocacaoConferirBean.professorSelecionado}"
								selectionMode="single">

								<p:ajax event="rowSelect"
									listener="#{AlocacaoConferirBean.onProfessorRowSelect}"
									update=":formAlocacao:infoProfessor :formAlocacao:dtAlocacaoProfessor" />
								<p:ajax event="rowUnselect"
									listener="#{AlocacaoConferirBean.onProfessorRowUnselect}"
									update=":formAlocacao:infoProfessor" />

								<p:column style="width:20px">
									<h:outputText id="dragProfessor"
										styleClass="ui-icon ui-icon-arrow-4" />
									<p:draggable for="dragProfessor" revert="true" />
								</p:column>
								<p:column headerText="Professor">
									<h:outputText value="#{prof.nome}" />
								</p:column>
							</p:dataTable>
						</p:outputPanel>

						<br /> <br />
						<!-- PAINEL E INFORMAÇÕES DO GRUPO E DOS PROFESSORES -->

						<p:outputPanel
							style="width:100%; float:left; position:relative; margin-top:10px;">
							<!-- INFORMAÇÕES DO GRUPO SELECIONADO -->
							<p:panel id="infoGrupo" header="Grupo de Trabalho"
								style="width:40%; float:left; position:relative;">
								<p:outputLabel
									rendered="#{AlocacaoConferirBean.grupoSelecionado == null}">Informações do grupo selecionado</p:outputLabel>

								<p:panel header="Coeficiente do Grupo"
									rendered="#{AlocacaoConferirBean.grupoSelecionado != null}">
									<p:outputLabel>#{AlocacaoConferirBean.grupoSelecionado.coeficienteRendimento}</p:outputLabel>
								</p:panel>

								<p:dataTable var="aluno" emptyMessage=""
									rendered="#{AlocacaoConferirBean.grupoSelecionado.integrantes != null}"
									value="#{AlocacaoConferirBean.grupoSelecionado.integrantes}">
									<p:column headerText="Alunos">
										<h:outputText value="#{aluno.nome}" />
									</p:column>
								</p:dataTable>

								<p:dataTable var="area" emptyMessage=""
									rendered="#{AlocacaoConferirBean.grupoSelecionado.areas != null}"
									value="#{AlocacaoConferirBean.grupoSelecionado.areas}">
									<p:column
										headerText="Areas de Interesse (ordem de preferência)">
										<h:outputText value="#{area.nome}" />
									</p:column>
								</p:dataTable>

								<p:dataTable var="prof" emptyMessage=""
									rendered="#{AlocacaoConferirBean.grupoSelecionado.professoresDesejados != null}"
									value="#{AlocacaoConferirBean.grupoSelecionado.professoresDesejados}">
									<p:column headerText="Professores (ordem de preferência)">
										<h:outputText value="#{prof.nome}" />
									</p:column>
								</p:dataTable>
							</p:panel>


							<!-- INFORMAÇÕES DO PROFESSOR SELECIONADO -->
							<p:panel id="infoProfessor" header="Professor"
								style="width:40%; float:right; position:relative;">
								<p:outputLabel
									rendered="#{AlocacaoConferirBean.professorSelecionado == null}">Informações do professor selecionado</p:outputLabel>

								<p:panel header="Carga Horária / Horas Orientação"
									rendered="#{AlocacaoConferirBean.professorSelecionado != null}">
									<p:outputLabel>#{AlocacaoConferirBean.professorSelecionado.cargaHoraria} / #{AlocacaoConferirBean.professorSelecionado.numHorasOrientacao}</p:outputLabel>
								</p:panel>
								<p:dataTable var="area" emptyMessage=""
									rendered="#{AlocacaoConferirBean.professorSelecionado.areasInteresse != null}"
									value="#{AlocacaoConferirBean.professorSelecionado.areasInteresse}">
									<p:column
										headerText="Areas de Interesse (ordem de preferência)">
										<h:outputText value="#{area.nome}" />
									</p:column>
								</p:dataTable>
							</p:panel>
						</p:outputPanel>
					</div>
				</div>
			</div>
		</h:form>

		<p:confirmDialog id="confirmDialog"
			message="Realmente deseja desfazer esta alocação?"
			header="Grupo de Trabalho" severity="alert" appendToBody="true"
			widgetVar="confirmation">
			<h:form id="formConfirm">
				<p:commandButton id="confirm" value="Sim" update=":formAlocacao"
					oncomplete="confirmation.hide()"
					actionListener="#{AlocacaoConferirBean.desfazerGrupo}" />
				<p:commandButton id="decline" value="Não"
					onclick="confirmation.hide()" type="button" />
			</h:form>
		</p:confirmDialog>

		<script type="text/javascript">
			function handleDrop(event, ui) {
                var droppedItem = ui.draggable;

                droppedItem.fadeOut('fast');
			}
		</script>
	</ui:define>
</ui:composition>

